<!doctype html>	
<html>	
<head>	
<meta charset="utf-8">	
<meta name="copyright" content="www.apicloud.com" />	
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>	
<title>window</title>	
<link rel="stylesheet" type="text/css" href="../css/api.css" />	
<link rel="stylesheet" type="text/css" href="../css/style.css"/>
<style>	
#main {	
    display: -webkit-box;	
    display: -webkit-flex;	
    display: flex;	
    -webkit-box-orient: vertical;	
    -webkit-flex-flow: column;	
    flex-flow: column;	
}	
#header {position: relative; background-color: #ff5d5f; border-bottom: 1px solid #e0e0e0;font-size:16px;}	
.logo {position: absolute; left: 0px; bottom: 0px; height: 15px; padding:10px;}	
h1 { height:35px; line-height: 35px; font-size: 16px; color: #fff;font-weight: normal;margin: 0 auto; text-align: center; }	
.navbar {	
    display: -webkit-box;	
    display: -webkit-flex;	
    display: flex;	
    -webkit-box-orient: horizontal;	
    position: relative;	
    height:35px; box-sizing: border-box;	
    background: #fff;	
    border-bottom: 1px solid #e0e0e0;	
}	
.navbar-item {	
    display: block; -webkit-box-flex: 1;	
    -webkit-flex: 1;	
    flex: 1;	
    width: 100%; line-height: 35px;	
    font-size: 16px; text-align: center;color: #9B9C9C;	
}	
.navbar-item-hov {	
    background-color: rgba(254,242,228,0.7);	
}	
.navbar-item-active {	
    color: #ff5d5f;	
}	
#navmark {	
    position: absolute; left: 0px; bottom: 0px;	
    -webkit-transition: 300ms;	
}	
	
#navmark img {position: absolute; bottom: 0; height: 8px;}	
</style>	
</head>	
<body>	
    <div id="main" ng-controller="qly_ctrl" ng-show="is_div_show">	
        <header id="header">	
            <img class="logo" src="../image/back_icon_app.png" tapmode onclick="javascript:close_cur_window();" />	
            <h1 id="title">title</h1>	
        </header>	
        <nav class="navbar">	
            <a id="nav_a_{{$index}}" class="navbar-item navbar-item-active" tapmode="navbar-item-hov" ng-repeat="nav in nav_list" ng-click="clickNavbar($index)">{{nav.title}}</a>	
		
            <mark id="navmark"><img src="../image/quick_action_arrow_up.png"></mark>	
        </nav>	
        <section id="content">	
        </section>	
    </div>	
</body>	
<script type="text/javascript" src="../script/api.js"></script>	
<script type="text/javascript" src="../script/angular.min.js"></script>
<script type="text/javascript" src="../script/version_update.js"></script>
<script type="text/javascript" src="../script/qly_comm.js"></script>
<script type="text/javascript">


 var navbarParams = null ; 

 function setFrameGroupIndex(frameIndex) {	
        api.setFrameGroupIndex({name:navbarParams.group_name,index:frameIndex,scroll:true});	
 }	

function setFrameGroupStatus(frameIndex) {	
        var title = $api.byId('title'),	
        navmark = $api.byId('navmark');
       
        var imgW = $api.dom('#navmark img').offsetHeight;	// 因为此图是正方形 所以 w = h  
        for(var i =0 ; i < navbarParams.nav_list.length ; i++ ){
        		var nav = navbarParams.nav_list[i] ; 
        		if( i ==  frameIndex){
        			title.innerHTML =nav.title ;	
				 $api.byId('nav_a_'+i).className = "navbar-item navbar-item-active";	
                //计算小三角的 位置
                var markLeft =  (api.winWidth/navbarParams.nav_list.length)*i + ((api.winWidth/navbarParams.nav_list.length)-imgW)/2   ;
                $api.css(navmark, "-webkit-transform:translate(" + markLeft + "px,0)");
        		}else{
        			  $api.byId('nav_a_'+i).className = "navbar-item";	
        		}
        }
    }
   
    apiready = function() {	
    
    		navbarParams =  api.pageParam.navbarParams ;
    
    		var AgApp = angular.module("qly_app",[]);
		AgApp.controller("qly_ctrl",function($scope){
			$scope.is_div_show = true ; 
			$scope.nav_list = navbarParams.nav_list ; 
			$scope.clickNavbar = function(inx){
				setFrameGroupIndex(inx);
				setFrameGroupStatus(inx);
			}
		});
		angular.bootstrap(document,['qly_app']);
        reload_frame();
        
        
         api.addEventListener({
		    name:'viewappear'
		}, function(ret, err){        
			  if(QlyApi.getTalkingdata()){
				QlyApi.getTalkingdata().onPageStart({pageName:api.pageParam.window_title});
			}
		});
        
         api.addEventListener({
		    name:'viewdisappear'
		}, function(ret, err){        
		   
		   if(QlyApi.getTalkingdata()){
				QlyApi.getTalkingdata().onPageEnd({pageName:api.pageParam.window_title});
			}
		});
        
        api.addEventListener({
		    name:'keyback'
		}, function(ret, err){      
		  
		    if(QlyApi.getTalkingdata()){
				QlyApi.getTalkingdata().onPageEnd({pageName:api.pageParam.window_title});
			} 
			api.closeWin({
		        animation: {
		            type: 'push',
		            subType: 'from_left',
		            duration: 300
		        }
		    });
		});
    };	

	function reload_frame(){
    		api.closeFrameGroup({
		    name: navbarParams.group_name
		});
    
    		var header = $api.byId('header');	
        $api.fixIos7Bar(header);
        $api.fixStatusBar(header);	
        var headerHeight = $api.byId('header').offsetHeight;	
        var scrollHeight = $api.dom('.navbar').offsetHeight;	
        $api.byId('navmark').style.width = api.winWidth/navbarParams.nav_list.length + 'px';	
        
        var _frames = [] ; 
        for(var i = 0 ; i < navbarParams.nav_list.length ; i ++){
        		navbarParams.nav_list[i].frameParams['url'] =  'widget://html/navbar_frame.html' ; 
        		navbarParams.nav_list[i].frameParams.pageParam = navbarParams.nav_list[i].frameParams.pageParam || {} ;
        		navbarParams.nav_list[i].frameParams.pageParam.remote_url = navbarParams.nav_list[i].frameParams.remote_url ; 
        		navbarParams.nav_list[i].frameParams.pageParam.window_title = api.pageParam.window_title ; 
        		_frames.push(navbarParams.nav_list[i].frameParams);
        }
        
        api.openFrameGroup({	
            name: navbarParams.group_name,	
            background: '#FFF',	
            rect: {x: 0, y: headerHeight+scrollHeight, w: "auto", h: "auto"},	
            index: 0,	
            frames:_frames
        }, function (ret) {	
            setFrameGroupStatus(ret.index);	
        });	
	 }



</script>	
</html>	
